<template>
  <div style="width:100%;height:240px;" id="alarmTriggerHeat"></div>
</template>

<script>
import echarts from "echarts";

export default {
  props: {
    dataSource: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  watch: {
    dataSource(curVal, oldVal) {
      this.$nextTick(() => {
        this.initEchats();
      });
    }
  },
  mounted() {},
  methods: {
    initEchats() {
      var heatChart = echarts.init(document.getElementById("alarmTriggerHeat"));
      var hours = [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23"
      ];
      var days = [
        "星期天",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ];

      var data = [
        [0, 0, 0],
        [0, 1, 0],
        [0, 2, 0],
        [0, 3, 0],
        [0, 4, 0],
        [0, 5, 0],
        [0, 6, 0],
        [0, 7, 0],
        [0, 8, 0],
        [0, 9, 0],
        [0, 10, 0],
        [0, 11, 0],
        [0, 12, 0],
        [0, 13, 0],
        [0, 14, 0],
        [0, 15, 0],
        [0, 16, 0],
        [0, 17, 0],
        [0, 18, 0],
        [0, 19, 0],
        [0, 20, 0],
        [0, 21, 0],
        [0, 22, 0],
        [0, 23, 0],
        [1, 0, 0],
        [1, 1, 0],
        [1, 2, 0],
        [1, 3, 0],
        [1, 4, 0],
        [1, 5, 0],
        [1, 6, 0],
        [1, 7, 0],
        [1, 8, 0],
        [1, 9, 0],
        [1, 10, 0],
        [1, 11, 0],
        [1, 12, 0],
        [1, 13, 0],
        [1, 14, 0],
        [1, 15, 0],
        [1, 16, 0],
        [1, 17, 0],
        [1, 18, 0],
        [1, 19, 0],
        [1, 20, 0],
        [1, 21, 0],
        [1, 22, 0],
        [1, 23, 0],
        [2, 0, 0],
        [2, 1, 0],
        [2, 2, 0],
        [2, 3, 0],
        [2, 4, 0],
        [2, 5, 0],
        [2, 6, 0],
        [2, 7, 0],
        [2, 8, 0],
        [2, 9, 0],
        [2, 10, 0],
        [2, 11, 0],
        [2, 12, 0],
        [2, 13, 0],
        [2, 14, 0],
        [2, 15, 0],
        [2, 16, 0],
        [2, 17, 0],
        [2, 18, 0],
        [2, 19, 0],
        [2, 20, 0],
        [2, 21, 0],
        [2, 22, 0],
        [2, 23, 0],
        [3, 0, 0],
        [3, 1, 0],
        [3, 2, 0],
        [3, 3, 0],
        [3, 4, 0],
        [3, 5, 0],
        [3, 6, 0],
        [3, 7, 0],
        [3, 8, 0],
        [3, 9, 0],
        [3, 10, 0],
        [3, 11, 0],
        [3, 12, 0],
        [3, 13, 0],
        [3, 14, 0],
        [3, 15, 0],
        [3, 16, 0],
        [3, 17, 0],
        [3, 18, 0],
        [3, 19, 0],
        [3, 20, 0],
        [3, 21, 0],
        [3, 22, 0],
        [3, 23, 0],
        [4, 0, 0],
        [4, 1, 0],
        [4, 2, 0],
        [4, 3, 0],
        [4, 4, 0],
        [4, 5, 0],
        [4, 6, 0],
        [4, 7, 0],
        [4, 8, 0],
        [4, 9, 0],
        [4, 10, 0],
        [4, 11, 0],
        [4, 12, 0],
        [4, 13, 0],
        [4, 14, 0],
        [4, 15, 0],
        [4, 16, 0],
        [4, 17, 0],
        [4, 18, 0],
        [4, 19, 0],
        [4, 20, 0],
        [4, 21, 0],
        [4, 22, 0],
        [4, 23, 0],
        [5, 0, 0],
        [5, 1, 0],
        [5, 2, 0],
        [5, 3, 0],
        [5, 4, 0],
        [5, 5, 0],
        [5, 6, 0],
        [5, 7, 0],
        [5, 8, 0],
        [5, 9, 0],
        [5, 10, 0],
        [5, 11, 0],
        [5, 12, 0],
        [5, 13, 0],
        [5, 14, 0],
        [5, 15, 0],
        [5, 16, 0],
        [5, 17, 0],
        [5, 18, 0],
        [5, 19, 0],
        [5, 20, 0],
        [5, 21, 0],
        [5, 22, 0],
        [5, 23, 0],
        [6, 0, 0],
        [6, 1, 0],
        [6, 2, 0],
        [6, 3, 0],
        [6, 4, 0],
        [6, 5, 0],
        [6, 6, 0],
        [6, 7, 0],
        [6, 8, 0],
        [6, 9, 0],
        [6, 10, 0],
        [6, 11, 0],
        [6, 12, 0],
        [6, 13, 0],
        [6, 14, 0],
        [6, 15, 0],
        [6, 16, 0],
        [6, 17, 0],
        [6, 18, 0],
        [6, 19, 0],
        [6, 20, 0],
        [6, 21, 0],
        [6, 22, 0],
        [6, 23, 0]
      ];
      for (let i = 0; i < this.dataSource.length; i++) {
        let dataItem = this.dataSource[i];
        let week = parseInt(dataItem.wk);
        let hr = parseInt(dataItem.hr);
        data[week * 24 + hr][2] = dataItem.count;
      }

      data = data.map(function(item) {
        return [item[1], item[0], item[2] || "-"];
      });

      let option = {
        tooltip: {
          position: "top"
        },
        animation: false,
        grid: {
          height: "50%",
          y: "10%"
        },
        xAxis: {
          type: "category",
          data: hours,
          splitArea: {
            show: true
          }
        },
        yAxis: {
          type: "category",
          data: days,
          splitArea: {
            show: true
          }
        },
        visualMap: {
          min: 0,
          max: 10,
          calculable: true,
          orient: "horizontal",
          left: "center",
          bottom: "15%"
        },
        series: [
          {
            name: "告警数量",
            type: "heatmap",
            data: data,
            label: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };

      heatChart.setOption(option);
      window.addEventListener("resize", function() {
        heatChart.resize();
      });
    }
  }
};
</script>
